
import React, { Component } from 'react'
import axios from 'axios'
import './css/06-communication.css'
// 订阅发布模式
var bus = {
  list: [],
  // 订阅
  subscribe (callback) {
    this.list.push(callback)
  },
  // 发布
  publish (text) {
    // console.log(text)
    this.list.forEach(item => {
      item && item(text)
    })
  }
}
export default class App extends Component {
  constructor() {
    super()
    axios.get('/test.json').then(res => {
      console.log(res.data.data.films)
      this.setState({
        films: res.data.data.films
      })
    })
  }
  state = {
    films: [],
    info: ''
  }
  handle = (synopsis) => {
    this.setState({
      value: synopsis
    })
  }
  render () {
    return (
      <div>
        {
          this.state.films.map(item =>
            <Films key={item.filmId} {...item} />
          )
        }
        <FilmsDetail />
      </div>
    )
  }
}

class Films extends Component {
  render () {
    let { name, poster, synopsis } = this.props
    return (
      <div>
        <img src={poster} alt={name} onClick={() => {
          bus.publish(synopsis)
        }} />
        {name}
      </div>
    )
  }
}
class FilmsDetail extends Component {
  constructor() {
    super()
    this.state = {
      info: ""
    }
    bus.subscribe((value) => {
      // console.log(value)
      this.setState({
        info: value
      })
    })
  }

  render () {
    return (
      <div className='filmsDetail'>

        {this.state.info ? this.state.info : "电影详情"}
      </div>
    )
  }
}